<meta charset="UTF-8">
<div id="mileage-oil-consumption">
    <div class="demo-spin-container" v-if="loading">
        <Spin size="large" fix></Spin>
    </div>
    <div class="report-item-header">
        <Row style="margin:10px;height: 32px;">
            <div class="fl">
                <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
            </div>
            <div style="position: relative;width: 240px;" class="fl">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedDev" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder" @on-click="focus"></i-input>
                    <transition name="fade">
                        <ul class="search-item-wrapper" v-show="isShowMatchDev">
                            <li class="demo-auto-complete-item" v-for="item in filterData">
                                <div class="demo-auto-complete-group" v-show="item.devices.length" @click="sosoSelectGroup(item.groupname)">
                                    <span>{{ item.groupname }}</span>
                                </div>
                                <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                    <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                                </div>
                            </li>
                        </ul>
                    </transition>
                </div>
            </div>
            <div style="padding-left: 10px;" class="fl">
                <span>{{$t("reportForm.selectTime")}}:</span>
                <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:180px" placement="bottom-start"></date-picker>
            </div>
            <div style="margin-left: 10px;" class="spans-wrap fl">
                <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(7)" :style="{color: dayNumberType == 7 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.sevenDays")}}</span>
            </div>

            <div style="margin-left:10px;" class="fl">
                <i-select v-model="metre">
                    <i-option value="1">1m</i-option>
                    <i-option value="1000">1000m</i-option>
                    <i-option value="5000">5000m</i-option>
                    <i-option value="10000">10000m</i-option>
                </i-select>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
            <div class="rt">
                <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </Row>
        <div style="width:100%;height: 180px;position: relative;">
            <div id="charts" style="height: 180px;width: 100%;"></div>
        </div>

        <div style="margin:10px;">
            <Tabs v-model="tabActive">
                <Tab-pane name="oil" :label="$t('reportForm.addOrLeakOilList')">
                    <i-table ref="oilTable" :columns="oilColumns" :data="oilTable" :height="lastTableHeight" border></i-table>
                    <div style="padding:5px">
                        <i-button type="primary" @click="addOilRecord">{{$t("user.add")}}</i-button>
                    </div>
                </Tab-pane>
                <Tab-pane name="track" :label="$t('reportForm.oilRecordList')">
                    <div id="oil-track">
                        <i-table ref="trackTable" :columns="columns" size="small" :height="lastTableHeight" border :data="tableData" highlight-row @on-row-dblclick="onRowClick"></i-table>
                    </div>
                    <Page :total="total" show-total @on-change="changePage" :page-size="20" :current="currentIndex" />
                </Tab-pane>
            </Tabs>
        </div>
    </div>
    <div class="content-wrap" v-show="isShowCard">
        <Card style="width:650px">
            <p slot="title" style="text-align:center;">
                <Icon type="ios-film-outline"></Icon>
                Content
            </p>
            <a href="#" slot="extra" @click.prevent="isShowCard = false" style="margin-top: -5px;">
                <Icon type="md-close-circle" size="26" />
            </a>
            <div id="content-string" style="max-height:400px;overflow-y:auto;">
                {{contentString}}
            </div>
        </Card>
    </div>
    <transition name="fade">
        <div v-show="trackDetailModal" class="posi-map-wraper">
            <div class="map-modal" @click="trackDetailModal=false"></div>
            <div class="work-inner-map-wraper">
                <div class="posi-map-title">
                    {{$t("monitor.track")}}
                    <div class="map-close"></div>
                </div>
                <div id="oil-details-map" class="work-details-map"></div>
            </div>
        </div>
    </transition>
</div>